<template>
  <div>
    <el-container>

      <el-header style="background-color: white; width: 100%;position: fixed;z-index: 99 ;border-bottom: rgba(99,99,99,0.2) 1px solid">
        <div style="margin: 0 auto;width: 1000px;background-color: white;height: 59px;border-bottom: rgba(99,99,99,0.2) 1px solid">
          <!--            头部的部分-->

          <div style="float: left;display: inline-block">
            <a  href="/" style="">
              <img  style="height: 30px;margin-top: 13px"   src="header.png">
            </a>
          </div>
          <div style="margin: 0 auto;display: inline-block;">
            <el-menu :default-active="activeIndex"
                     class="el-menu-demo"
                     mode="horizontal" @select="handleSelect" >
              <el-menu-item index="1"><a  @click="$router.push('/homepage')" style="margin: 0 20px">首页</a></el-menu-item>
              <!--submenu子菜单-->

              <el-submenu index="2" style="margin: 0 20px">
                <template slot="title"><a @click="$router.push('/recipe')">菜谱</a></template>
                <div class="ctip" style="display: block;width: 600px;height: 650px;padding: 20px 20px">
                  <div class="ctab-clearfix">
                    <a href="/jingxuan/" target="_blank"><img src="https://cp1.douguo.com/static/nweb/images/jx3.png" alt="" width="12px"> 精选</a>
                    <a href="/zuixin/" target="_blank"> <img src="https://i1.douguo.com/upload/banner/1585648022.png" alt="" style="margin-right:4px;"  width="12px">最新</a>
                    <a href="/caidan" target="_blank"><img src="https://cp1.douguo.com/static/nweb/images/menu3.png" alt=""  width="12px"> 菜单</a>
                  </div>
                  <div class="cblok clearfix">
                    <div class="citem clearfix">
                      <span>常见菜式</span>
                      <div class="imublo clearfix">
                        <a href="/caipu/家常菜" target="_blank">家常菜</a>
                        <a href="/caipu/热菜" target="_blank">热菜</a>
                        <a href="/caipu/凉菜" target="_blank">凉菜</a>
                        <a href="/caipu/主食" target="_blank">主食</a>
                        <a href="/caipu/汤" target="_blank">汤</a>
                        <a href="/caipu/早餐" target="_blank">早餐</a>
                        <a href="/caipu/午餐" target="_blank">午餐</a>
                        <a href="/caipu/海鲜" target="_blank">海鲜</a>
                        <a href="/caipu/孕妇" target="_blank">孕妇</a>
                        <a href="/caipu/甜品" target="_blank">甜品</a>
                        <a href="/caipu/粥" target="_blank">粥</a>
                        <a href="/caipu/宝宝食谱" target="_blank">宝宝食谱</a>
                        <a href="/caipu/糕点" target="_blank">糕点</a>
                        <a href="/caipu/微波炉" target="_blank">微波炉</a>
                      </div>
                    </div>
                    <div class="citem clearfix">
                      <span>中国菜系</span>
                      <div class="imublo clearfix">
                        <a href="/caipu/川菜" target="_blank">川菜</a>
                        <a href="/caipu/粤菜" target="_blank">粤菜</a>
                        <a href="/caipu/东北菜" target="_blank">东北菜</a>
                        <a href="/caipu/湘菜" target="_blank">湘菜</a>
                        <a href="/caipu/鲁菜" target="_blank">鲁菜</a>
                        <a href="/caipu/浙菜" target="_blank">浙菜</a>
                        <a href="/caipu/湖北菜" target="_blank">湖北菜</a>
                        <a href="/caipu/清真菜" target="_blank">清真菜</a>
                      </div>
                    </div>
                    <div class="citem clearfix">
                      <span>外国食谱</span>
                      <div class="imublo clearfix">
                        <a href="/caipu/韩国" target="_blank">韩国</a>
                        <a href="/caipu/日本料理" target="_blank">日本料理</a>
                        <a href="/caipu/法国" target="_blank">法国</a>
                        <a href="/caipu/意大利餐" target="_blank">意大利餐</a>
                      </div>
                    </div>
                    <div class="citem clearfix">
                      <span>各地小吃</span>
                      <div class="imublo clearfix">
                        <a href="/caipu/四川小吃" target="_blank">四川小吃</a>
                        <a href="/caipu/广东小吃" target="_blank">广东小吃</a>
                        <a href="/caipu/北京小吃" target="_blank">北京小吃</a>
                        <a href="/caipu/陕西小吃" target="_blank">陕西小吃</a>
                      </div>
                    </div>
                    <div class="citem clearfix">
                      <span>烘焙大全</span>
                      <div class="imublo clearfix">
                        <a href="/caipu/蛋糕" target="_blank">蛋糕</a>
                        <a href="/caipu/面包" target="_blank">面包</a>
                        <a href="/caipu/饼干" target="_blank">饼干</a>
                        <a href="/caipu/披萨" target="_blank">披萨</a>
                        <a href="/caipu/甜品" target="_blank">甜品</a>
                      </div>
                    </div>
                  </div>
                  <div class="cmore" style="height: 50px">
                    <a href="/category" target="_self" style="width: 130px;margin-top: 30px">查看全部分类 <img src="https://cp1.douguo.com/static/nweb/images/more2.png" alt=""></a>
                  </div>
                </div>

              </el-submenu>

<!--              todo 跳转到笔记-->
              <el-menu-item index="3" style="margin: 0 20px"><a @click="$router.push('/homepage')" style="text-decoration: none">笔记</a></el-menu-item>

              <div style="float: right;position: relative;top: 20px">
                <el-input type="text" placeholder="搜索菜品 菜单 食材" v-model="search">
<!--                  todo 搜索后  根据关键词展示菜谱列表  -->
                  <el-button slot="append" icon="el-icon-search" @click="searchRecipe()"></el-button>
                  <span><a href="javascript:void(0);"></a></span>
                </el-input>
              </div>
            </el-menu>
          </div>

<!--          用户或者登录注册按钮的显示-->

            <div style="float: right;display: inline-block;padding:20px;" v-if="notLogged">
              <a href="/login" style="color: black;text-decoration: none;">注册</a>
              <el-divider direction="vertical"></el-divider>
              <a href="/login" style="color: black;text-decoration: none;">登录</a>
            </div>


            <!-- 显示当前登录的用户信息 -->
            <div class="login-user" style="float: right;display: inline-block;margin-top:15px;margin-left: 25px"   v-else>
              <el-dropdown>
                <a href="/user/info"><el-avatar :src="userInfo.avatar"
                                      size="small"></el-avatar></a>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item icon="el-icon-plus"><a href="/create/recipe">发布菜谱</a></el-dropdown-item>
                  <el-dropdown-item icon="el-icon-plus">发布笔记</el-dropdown-item>
                  <el-dropdown-item icon="el-icon-eleme"><a href="">修改资料</a></el-dropdown-item>
                  <div @click="openLogoutConfirm()"><el-dropdown-item icon="el-icon-check" divided >退出登录</el-dropdown-item></div>
                </el-dropdown-menu>
              </el-dropdown>
            </div>


          <div style="float: right;display: inline-block;padding-top:20px;padding-right:5px;margin-left: 0px;"><a href="/create/recipe" style="display: inline-block;
      width: 60px;
      height: 25px;
      text-align: center;
      line-height: 23px;
      background: #FFB31A;
      color: #fff;
      font-size: 14px;
      border-radius: 4px;
      text-decoration: none;">发布</a></div>


        </div>
      </el-header>

      <el-main >
        <el-scrollbar class="page-scroll">
        <!-- 将由其它视图组件来显示 -->
        <router-view/>
        </el-scrollbar>
      </el-main>
    </el-container>


  </div>
</template>

<script>

export default {
  data() {
    return {
      userInfo:{ },
      notLogged:true,
      search:"",
      $:"",
      handleSelect(key, keyPath) {
        //key就是菜单项的index值 keyPath代表点击的菜单项完整路径
        console.log(key, keyPath);
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      activeIndex: '1',
      activeIndex2: '1',

    }


  },
  methods: {
    // 打开登出确认框
    openLogoutConfirm() {
      console.log("打开登出确认框...")
      let message = '即将退出登录，是否继续？';
      this.$confirm(message, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleLogout();
      }).catch(() => {
      });
    },
    // 处理登出
    handleLogout() {
      let localJwt = localStorage.getItem('loginInfo');

      let url = 'http://localhost:8889/user/logout?jwt='+localJwt;
      console.log('url = ' + url);

      this.axios
          .create({
            'headers': {
              'Authorization': localJwt
            }
          })
          .post(url,localJwt).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          localStorage.removeItem('loginInfo');
          this.$router.push('/login');
        }
      });
    },

    handleActiveMenuItem(){
      let currentPath=this.$router.currentRoute.path;
      if(currentPath.startsWith('/sys-admin/product/album')){
        currentPath='/sys-admin/product/album';
      }
      if(currentPath.startsWith('/sys-admin/product/attributeTemplate')){
        currentPath='/sys-admin/product/attributeTemplate';
      }
      if(currentPath.startsWith('/sys-admin/permission/admin')){
        currentPath='/sys-admin/permission/admin';
      }
      this.activeMenuItemPath=currentPath;
    },
    searchRecipe(){
      // let path = this.$router.currentRoute.path;
      // if (path.startsWith('/sys-admin/product/spu/add-new-')) {
      //   path = '/sys-admin/product/spu/add-new-1';
      // }
        this.$router.replace('/');
        this.$router.push("recipe/search?keyword="+this.search);
    },
    freshPage(){
      let userId = localStorage.getItem('userId');
      if(userId!=null){
        this.notLogged=false;
        //获取该用户的昵称和头像
        let url = 'http://localhost:8889/user/getUserInfo?userId='+userId;
        console.log('url = ' + url);
        let localJwt = localStorage.getItem('loginInfo');
        this.axios
            .create({
              'headers': {
                'Authorization': localJwt
              }
            }).get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.userInfo = jsonResult.data;
          } else {
            this.$alert(jsonResult.message, '错误', {
              confirmButtonText: '确定',
              callback: action => {
              }
            });
          }
        });

      }
    }
  },
  mounted() {
    this.handleActiveMenuItem();
    this.freshPage();

  }
}
</script>

<style>
*{margin: 0;
  padding:0
}

a{
  text-decoration: none;
  color: #333333;
}

a:hover{cursor: pointer;
  color: orange;
  text-decoration: none}

.el-menu--horizontal>.el-menu-item,.el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 49px;
  line-height: 70px;
}

.el-menu-item,.el-submenu__title{
  padding: 0 15px;
}
.el-button{
  padding: 8px 12px;
}
.el-input__inner{
  height: 30px;
  line-height: 20px;
}


#index_main{margin: 0 auto}
.el-card__body, .el-main{
  padding:0;}
/*#index_footer{height: 398px;background-color: #e8e8e8}*/

.dailyMenu  .title{font-size: 15px;line-height: 35px}
.dailyMenu  .author{font-size: 12px;line-height: 13px}
.othersSearch_topic span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 24px;
  font-size: 12px;
  margin: 12px;
}
.othersSearch_topic span:hover{
  color: orange;
  border: orange 1px solid;
}
.el-aside .follow span{
  display: inline-block;
  border: #333333 1px solid;
  border-radius: 5px;
  padding: 6px 16px;
  font-size: 12px;
  margin: 12px;
}
.el-aside .follow span:hover{
  color: orange;
  border: orange 1px solid;
}
.follow_author{
  font-size: 15px;
}
.follow_fans{
  font-size: 12px;
  color: #999999;
  margin-top: 8px;
}
element.style {
  padding: 0;
}
.el-menu.el-menu--horizontal{
  border-bottom: none;
}
.el-main{
  padding: 0 !important;
}
.el-submenu__title{
  padding: 0 5px !important;
}
.el-dropdown-menu__item, .el-menu-item{
  padding: 0 10px !important;
}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 4px solid #409EFF;
  color: #303133;
}
.el-menu--horizontal>.el-menu-item, .el-menu--horizontal>.el-submenu .el-submenu__title {
  height: 55px !important;
  line-height: 54px;
}
.ctip a{
  display: inline-block;
  width: 95px;
  height: 30px;
}
.ctip span{
  display: inline-block;
  width: 95px;
  height: 30px;
  font-size: 20px;
  font-weight: bold;
  margin: 10px 0px;
}
.page-scroll .el-scrollbar__wrap {
  overflow-y: hidden;
}
.el-menu--horizontal>.el-menu-item.is-active {
  border-bottom: 2px solid rgb(255, 179, 26) !important;
  color: #303133;
}
</style>

